<script setup>
import { reactive } from 'vue'

const formData = reactive({
  name: '',
  phone: '',
  remark: '',
})

const formRules = reactive({
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur',
    },
  ],
  phone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur',
    },
  ],
  remark: [
    {
      required: true,
      message: '请输入备注',
      trigger: 'blur',
    },
  ],
})
</script>

<template>
  <div class="xiuxishi">
    <u-form labelWidth="auto" :borderBottom="true" :model="formData" :rules="formRules" ref="form1">
      <u-form-item :borderBottom="true" label="姓名" prop="name">
        <u-input border="none" v-model="formData.name"></u-input>
      </u-form-item>
      <u-form-item :borderBottom="true" label="手机号" prop="phone">
        <u-input border="none" v-model="formData.phone"></u-input>
      </u-form-item>
      <u-form-item label="备注" prop="remark">
        <u-input border="none" v-model="formData.remark"></u-input>
      </u-form-item>
    </u-form>

    <div class="des">
      <view class="title">注意事项</view>
      <div class="content">
        <text>
          1.清洁标准：每日至少进行两次全面清洁，包括地面清扫拖
          拭、桌面擦拭、座椅除尘等。重点清洁区域如茶几、水杯放
          置处、垃圾桶周边需随时保持干净，确保无污渍、水渍和杂 物残留。
        </text>

        <text>
          2.空气质量：保持通风良好，每天开窗通风不少于 3 次，每 次通风时间不低于 30
          分钟。在空气质量不佳时，开启空气 净化器，定期更换滤网，确保室内空气清新无异味。</text
        >
        <text>
          3.温度湿度：将室内温度控制在 22-26℃之间，相对湿度保 持在
          40%-60%。根据季节变化及时调整空调设置，避免过 冷或过热，为使用者提供舒适的环境。
        </text>
        <text
          >4.设施摆放：沙发、座椅、茶几等设施需摆放整齐有序，间
          距合理，方便使用者通行和就坐。杂志、报刊等阅读资料定 期更新并整齐摆放于报刊架上。</text
        >
      </div>
    </div>

    <button class="submint-btn">提交</button>
  </div>
</template>

<style scoped lang="scss">
.u-form {
  padding: 30rpx;
  margin-top: 80rpx;
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.des {
  margin-top: 30rpx;
  .title {
    font-size: 32rpx;
    font-weight: bold;
  }
  .content {
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
    gap: 40rpx;
    color: $uni-text-color-grey;
    font-size: 26rpx;
  }
}

.submint-btn {
  margin-top: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(180deg, #ff7f36 0%, #f54730 100%);
  border-radius: 51rpx 51rpx 51rpx 51rpx;
  font-size: 26rpx;
  color: #fff;
}

.xiuxishi {
  padding: 0rpx 30rpx;
}
</style>
